<template>
	<!-- 顶部图片区域 -->
	<div class="wrapper">
		<img
			class="img"
			:src="imageUrl + HeadInfo?.albumDetailInfo?.albumInfo.cover"
			alt="" />
		<van-overlay :show="true" class="block">
			<van-row>
				<van-col span="8">
					<van-image
						width="100"
						height="100"
						:src="imageUrl + HeadInfo?.albumDetailInfo?.albumInfo.cover" />
				</van-col>
				<van-col offset="2" span="14">
					<div class="title">
						{{ HeadInfo.albumDetailInfo?.albumInfo.title }}
					</div>
					<div class="iw">
						<van-image
							class="icon"
							round
							width="20px"
							height="20px"
							fit="fill"
							:src="imageUrl + HeadInfo.albumDetailInfo?.albumInfo.cover" />
						<span class="workroom">声情工作室</span>
					</div>
					<van-divider class="divider" />
					<span class="subscribe"
						>已订阅{{
							HeadInfo.albumDetailInfo?.statCountInfo.subscribeCount
						}}万人</span
					>
				</van-col>
			</van-row>
		</van-overlay>
	</div>
	<div
		ref="divRef"
		v-html="HeadInfo.albumRichInfo?.richIntro"
		class="shortIntro"></div>
	<div class="more" @click="seeAll">
		<van-icon name="arrow-down" />
	</div>
	<button class="button" @click="toHome">返回主页</button>
</template>

<script setup lang="ts">
	let imageUrl = "//imagev2.xmcdn.com/";
	import { ref } from "vue";
	const divRef = ref();
	import { useRouter } from "vue-router";
	let router = useRouter();
	defineProps<{
		HeadInfo: any;
	}>();
	// 查看更多
	let seeAll = (e: any) => {
		divRef.value.style.height = "auto";
		e.currentTarget.style.display = "none";
	};

	let toHome = () => {
		router.push({
			path: "/homepage/tuijian",
		});
	};
</script>

<style lang="less" scoped>
	.button {
		background-color: aqua;
		width: 375px;
		height: 50px;
		position: fixed;
		top: 0;
	}
	// 顶部图片区域
	.wrapper {
		width: 100%;
		height: 180px;

		.block {
			width: 100%;
			height: 180px;
			padding: 30px 25px;
			box-sizing: border-box;
			position: absolute;
			left: 0px;
			top: 0px;

			.title {
				color: #fff;
			}
			.iw {
				margin: 15px 0px;
				display: flex;
				.icon {
					display: inline-block;
					margin-right: 8px;
				}
				.workroom {
					color: #fff;
					font-size: 12px;
				}
			}
			.divider {
				margin: 8px 0;
			}
			.subscribe {
				color: #fff;
				font-size: 12px;
			}
		}
		.img {
			width: 100%;
			height: 100%;
			filter: blur(3px);
		}
	}
	.shortIntro {
		height: 160px;
		overflow: hidden;
		padding: 0 15px;
	}
	.more {
		font-size: 16px;
		padding: 16px 0px;
		text-align: center;
		font-weight: bold;
		color: #f86442;
	}
</style>
